下篇：Day08-Directives指令: 屬性指令-動態更改css

Angular 內建指令簡介

Angular 應用程式中的元素新增額外行為的類別。

１、元件指令

1. 主要用於指定html模板。
2. 是一個用 @component 裝飾器裝飾的簡單類別。
3. 是 Angular 專案中最常用的指令。

// app.component.ts
@Component({  
  selector: 'my-App',  
  template: '<h1>{{name}}</h1>'  
})  

２、屬性型指令

主要用於改變 html 元素/元件 的屬性。

Day05-Template 範本: 資料綁定 DOM ↔ Component 有稍微提到過屬性的繫結

Ngclass

[ngClass] = "string | string[] | Set<string> | { [klass: string]: any; }"

<!-- XXX.component.html -->
<button [ngClass]="isSpecial ? 'myclass1' : ''">送出</button>

// XXX.component.ts
isSpecial: boolean = true; 

// XXX.component.css
.myclass1{  
  color:grey;  
}

另個範例：官方文件連結

延伸閱讀：Typescript高级类型Record
Record 會將某個類型的屬性值 映射至 另個類型、並創造一個新的類型。

<!-- XXX.component.html -->
<button [ngClass]="currentClasses">送出</button>

// XXX.component.ts
currentClasses: Record<string, boolean> = {};
setCurrentClasses() {
  this.currentClasses =  {
    saveable: this.canSave,      // Boolean
    modified: !this.isUnchanged, // Boolean
    special:  this.isSpecial     // Boolean
  };
}

Ngstyle

[ngStyle] = "{ [klass: string]: any; }"

<!-- XXX.component.html -->
<button [ngStyle]='applyClasses()'>送出</button>

// XXX.component.css
.boldClass{  
  font-weight:bold;  
  font-size : 30px;  
} 
.colorClass{  
  color:grey;  
}

// XXX.component.ts
applyClasses() {  
  return {  
    boldClass: true,  
    italicsClass: true  
  }
} 

另個範例：官方文件連結

<!-- XXX.component.html -->
<button [ngStyle]="currentClasses">送出</button>

// XXX.component.ts
currentClasses: Record<string, boolean> = {};
setCurrentClasses() {
  this.currentClasses =  {
    'font-style':  this.canSave      ? 'italic' : 'normal',
    'font-weight': !this.isUnchanged ? 'bold'   : 'normal',
    'font-size':   this.isSpecial    ? '24px'   : '12px'
  };
}

Ngmodel

引入 Angular 的 FormsModule 才能使用 [(ngModel)]

// app.module.ts
import { FormsModule } from '@angular/forms';
imports: [
  ...,
  FormsModule
]

<!-- XXX.component.html -->
<input [(ngModel)]="myname">

// XXX.component.ts
myname: string = "";

延伸應用：[Angular] 格式化使用ngModel的輸入框值，同時保持model值不變

資料來源

Angular - 內建指令
Angular Directives With Examples
[Day17] TS：理解 Pick、Record 的實作